<template>
  <div class="cartItem" >
    <div class="flex">
      <van-checkbox v-model="checked" @click="checkClick"></van-checkbox>
      <div class="flex" @click="onCartItemClick">
        <img :src=item.mainImg>
        <div class="main flex flex-column flex-around">
          <div class="title van-ellipsis">{{ item.title }}</div>
          <div class="size">{{ item.size }}</div>
          <span>
          <van-tag plain type="primary" color="#E50A4E" v-for="(tag,index) in item.tags"
                   :key="'tag'+index" class="tags">
            {{ tag }}
          </van-tag>
        </span>
        </div>
      </div>
    </div>

    <div class="money flex flex-between">
      <div class="price-color">
        <span class="character">￥</span>
        <span class="price">{{ integer }}</span>
        <span class="decimal">.{{ decimal }}</span>
      </div>
      <div class="count" v-show="!stepperShow" @click="showStepper"
           @click.stop>x{{ item.count }}
      </div>
      <div v-show="stepperShow" @click.stop>
        <van-stepper integer v-model=value @change="onChangeCount"/>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Checkbox, CheckboxGroup} from 'vant';
import {Tag} from 'vant';
import {Stepper} from 'vant';

Vue.use(Stepper);
Vue.use(Tag);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
export default {
  name: "cartItem",
  props: {
    item: {
      type: Object,
      default() {
        return {
          id: "000",
          mainImg: require("@/assets/logo.png"),
          title: "title",
          size: "黑色;M/170",
          price: 888,
          count: 888,
          tags: ["满300减200", "一折优惠"]
        }
      }
    },
  },
  data() {
    return {
      checked: false,
      value: this.item.count,
      stepperShow: false,
    };
  },
  computed: {
    integer() {
      let price = this.item.price;
      return parseInt(price);
    },
    decimal() {
      let price = this.item.price;
      let num = price * 100 - parseInt(price) * 100;
      return num;
    }
  },
  methods: {
    onChangeCount(value) {
      this.item.count = value;
      let payload = {
        value: value,
        id: this.item.id,
      }
      this.$store.commit('onChangeCount', payload);
      this.$emit('checkClick')
    },
    showStepper() {
      this.stepperShow = true;
    },
    onCartItemClick() {
      this.$router.push("/goodsDetail?id=" + this.item.id);
    },
    checkClick(){
      let payload={
        id:this.item.id,
        checked:this.checked
      }
      this.$store.commit('selectItem',payload)

      this.$emit('checkClick')
    }
  },
  created() {
    this.$store.state.cartList.filter((n)=>{
      if(n.id===this.item.id) this.checked=n.checked
    })
  }
}
</script>

<style lang="less" scoped>
img {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: .4rem;
}

.cartItem {
  background-color: #fff;
  border-radius: .2rem;
  padding: .4rem .2rem;
  margin: .4rem;

  .main {
    flex: 1;

    .title {
      font-size: .45rem;
      width: 5rem;
    }

    .size {
      padding: .1rem;
      border-radius: .1rem;
      font-size: .45rem;
      background-color: #F8F8F8;
      color: #A0A0A0;
    }

    .tags {
      margin-right: .1rem;
    }
  }

  .money {
    margin-left: 3.5rem;

    .price {
      font-size: .6rem;
      font-weight: 550;
    }

    .decimal {
      font-size: .5rem;
      font-weight: 550;
    }

    .character {
      font-size: .4rem;
    }

    .count {
      font-size: .4rem;
      border: .01rem solid #B9B9B9;
      border-radius: .2rem;
      padding: .1rem .2rem;
    }
  }


}
</style>